import {
  Colors,
  Text,
  TouchableOpacity,
  View,
  ActionBar,
  Button,
  Checkbox,
  Chip,
  RadioButton,
  RadioGroup,
  Slider,
  Switch,
  Picker,
  ChipsInput,
  ColorPalette,
  ColorPicker,
  ColorSwatch,
  DateTimePicker,
  MaskedInput,
  NumberInput,
  SectionsWheelPicker,
  SegmentedControl,
  Stepper,
  TextField,
  WheelPicker,
  Card,
  Carousel,
  LoaderScreen,
  StackAggregator,
  StateScreen,
  ListItem,
  Drawer,
  GridList,
  GridListItem,
  GridView,
  SortableGridList,
  SortableList,
  Timeline,
  TabController,
  Wizard,
  PageControl,
  Dialog,
  Modal,
  ActionSheet,
  FeatureHighlight,
  FloatingButton,
  Hint,
  Toast,
  Dash,
  ExpandableSection,
  Fader,
  Gradient,
  PanningProvider,
  Badge,
  ConnectionStatusBar,
  ProgressBar,
  SkeletonView,
} from "react-native-ui-lib";
import React, { useState, useCallback } from "react";
import ParallaxScrollView from "@/components/ParallaxScrollView";

export default function uiLibScreen() {
  const [dialogVisible, setDialogVisible] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);
  const [actionSheetVisible, setActionSheetVisible] = useState(false);
  const [featureHighlightVisible, setFeatureHighlightVisible] = useState(false);
  const [hintVisible, setHintVisible] = useState(false);
  const [toastVisible, setToastVisible] = useState(false);

  const renderTimeText = useCallback((value: string) => {
    const paddedValue = value.toString().padStart(4, "0");
    const hours = paddedValue.substr(0, 2);
    const minutes = paddedValue.substr(2, 2);

    return (
      <Text text20 grey20 center>
        {hours}
        <Text red10>h</Text>
        {minutes}
        <Text red10>m</Text>
      </Text>
    );
  }, []);

  return (
    <ParallaxScrollView>
      {/* View组件示例 */}
      <View padding-16>
        <Text h1>View组件</Text>
        <Text marginB-16>
          View是React Native中最基础的容器组件，用于布局和包含其他组件。
        </Text>
        <View
          style={{
            height: 100,
            backgroundColor: "#e1f5fe",
            justifyContent: "center",
            alignItems: "center",
            borderRadius: 8,
          }}
        >
          <Text>这是一个View容器示例</Text>
        </View>
      </View>

      {/* Text组件示例 */}
      <View padding-16>
        <Text h1>Text组件</Text>
        <Text marginB-16>Text组件用于显示文本内容，支持多种样式和排版。</Text>
        <View style={{ gap: 8 }}>
          <Text h2>标题文本</Text>
          <Text>普通文本</Text>
          <Text text70>中等大小文本</Text>
          <Text text80 small>
            小号文本
          </Text>
          <Text style={{ color: "red" }}>红色文本</Text>
        </View>
      </View>

      {/* TouchableOpacity组件示例 */}
      <View padding-16>
        <Text h1>TouchableOpacity组件</Text>
        <Text marginB-16>
          可触摸组件，点击时会有透明度变化效果，常用于按钮等交互元素。
        </Text>
        <TouchableOpacity
          style={{
            backgroundColor: "#2196f3",
            padding: 12,
            borderRadius: 8,
            alignItems: "center",
          }}
          onPress={() => console.log("按钮被点击")}
        >
          <Text style={{ color: "white" }}>点击我</Text>
        </TouchableOpacity>
      </View>
      {/* ActionBar组件示例 */}
      <View padding-16>
        <Text h1>ActionBar组件</Text>
        <Text marginB-16>操作栏组件，用于显示一组操作按钮。</Text>
        <ActionBar
          actions={[
            { label: "分享", onPress: () => console.log("分享") },
            { label: "收藏", onPress: () => console.log("收藏") },
            { label: "删除", onPress: () => console.log("删除"), red30: true },
          ]}
          keepRelative
        />
      </View>

      {/* Button组件示例 */}
      <View padding-16>
        <Text h1>Button组件</Text>
        <Text marginB-16>按钮组件，支持多种样式和状态。</Text>
        <View style={{ gap: 8 }}>
          <Button label="主要按钮" size={Button.sizes.medium} />
          <Button label="次要按钮" outline size={Button.sizes.medium} />
          <Button label="禁用按钮" disabled size={Button.sizes.medium} />
        </View>
      </View>

      {/* Checkbox组件示例 */}
      <View padding-16>
        <Text h1>Checkbox组件</Text>
        <Text marginB-16>复选框组件，用于多选操作。</Text>
        <View style={{ gap: 8 }}>
          <Checkbox value={true} label="已选中" />
          <Checkbox value={false} label="未选中" />
          <Checkbox value={true} label="禁用状态" disabled />
        </View>
      </View>

      {/* Chip组件示例 */}
      <View padding-16>
        <Text h1>Chip组件</Text>
        <Text marginB-16>标签组件，用于显示紧凑的信息。</Text>
        <View style={{ flexDirection: "row", gap: 8, flexWrap: "wrap" }}>
          <Chip label="默认标签" />
          <Chip label="可关闭" onDismiss={() => console.log("关闭")} />
        </View>
      </View>

      {/* RadioButton和RadioGroup组件示例 */}
      <View padding-16>
        <Text h1>RadioButton和RadioGroup</Text>
        <Text marginB-16>单选按钮和单选组，用于互斥选择。</Text>
        <RadioGroup initialValue="option1">
          <RadioButton value="option1" label="选项一" />
          <RadioButton value="option2" label="选项二" />
          <RadioButton value="option3" label="选项三" disabled />
        </RadioGroup>
      </View>

      {/* Slider组件示例 */}
      <View padding-16>
        <Text h1>Slider组件</Text>
        <Text marginB-16>滑动选择器，用于选择范围内的值。</Text>
        <Slider
          value={50}
          minimumValue={0}
          maximumValue={100}
          step={1}
          onValueChange={(value) => console.log(value)}
        />
      </View>

      {/* Switch组件示例 */}
      <View padding-16>
        <Text h1>Switch组件</Text>
        <Text marginB-16>开关组件，用于切换两种状态。</Text>
        <View style={{ gap: 8 }}>
          <Switch
            value={true}
            onValueChange={() => console.log("开关状态改变")}
          />
          <Switch value={false} />
          <Switch value={true} disabled />
        </View>
      </View>
      {/* Picker组件示例 */}
      <View padding-16>
        <Text h1>Picker组件</Text>
        <Text marginB-16>下拉选择器组件，用于从多个选项中选择一个值。</Text>
        <Picker
          placeholder="请选择"
          value="option1"
          items={[
            { label: "选项一", value: "option1" },
            { label: "选项二", value: "option2" },
            { label: "选项三", value: "option3" },
          ]}
          onChange={(item) => console.log(item)}
        />
      </View>

      {/* ChipsInput组件示例 */}
      <View padding-16>
        <Text h1>ChipsInput组件</Text>
        <Text marginB-16>标签输入组件，允许用户输入和选择多个标签。</Text>
        <ChipsInput
          placeholder="输入标签"
          chips={[{ label: "标签1" }, { label: "标签2" }]}
          onChange={(chips) => console.log(chips)}
        />
      </View>

      {/* ColorPalette组件示例 */}
      <View padding-16>
        <Text h1>ColorPalette组件</Text>
        <Text marginB-16>颜色调色板组件，提供一组预设颜色供选择。</Text>
        <ColorPalette
          colors={["#FF0000", "#00FF00", "#0000FF"]}
          onValueChange={(color) => console.log(color)}
        />
      </View>

      {/* ColorPicker组件示例 */}
      <View padding-16>
        <Text h1>ColorPicker组件</Text>
        <Text marginB-16>颜色选择器组件，允许用户选择自定义颜色。</Text>
        <ColorPicker
          colors={["#FF0000", "#00FF00", "#0000FF"]}
          value="#FF0000"
          onValueChange={(color) => console.log(color)}
        />
      </View>

      {/* ColorSwatch组件示例 */}
      <View padding-16>
        <Text h1>ColorSwatch组件</Text>
        <Text marginB-16>颜色样本组件，用于展示颜色块。</Text>
        <View style={{ flexDirection: "row", gap: 8 }}>
          <ColorSwatch color="#FF0000" />
          <ColorSwatch color="#00FF00" />
          <ColorSwatch color="#0000FF" />
        </View>
      </View>

      {/* DateTimePicker组件示例 */}
      <View padding-16>
        <Text h1>DateTimePicker组件</Text>
        <Text marginB-16>日期时间选择器组件，用于选择日期和时间。</Text>
        <DateTimePicker
          mode="date"
          placeholder="选择日期"
          onChange={(date) => console.log(date)}
        />
      </View>

      {/* MaskedInput组件示例 */}
      <View padding-16>
        <Text h1>MaskedInput组件</Text>
        <Text marginB-16>带格式的输入框组件，用于输入特定格式的文本。</Text>
        <MaskedInput
          migrate
          renderMaskedText={renderTimeText}
          keyboardType={"numeric"}
          maxLength={4}
          initialValue={"1234"}
          onChangeText={(text: string) => console.log(text)}
        />
      </View>

      {/* NumberInput组件示例 */}
      <View padding-16>
        <Text h1>NumberInput组件</Text>
        <Text marginB-16>数字输入框组件，用于输入数字值。</Text>
        <NumberInput
          initialNumber={0}
          onChangeNumber={(num) => console.log(num)}
        />
      </View>

      {/* SectionsWheelPicker组件示例 */}
      <View padding-16>
        <Text h1>SectionsWheelPicker组件</Text>
        <Text marginB-16>分段滚轮选择器组件，用于选择多段数据。</Text>
        <SectionsWheelPicker
          sections={[
            {
              initialValue: 0,
              items: [
                { value: 0, label: "选项1" },
                { value: 1, label: "选项2" },
                { value: 2, label: "选项3" },
              ],
              label: "第一段",
              onChange: (values) => console.log(values),
            },
            {
              initialValue: 3,
              items: [{ value: 3, label: "选项4" }],
              label: "第二段",
              onChange: (values) => console.log(values),
            },
          ]}
        />
      </View>

      {/* SegmentedControl组件示例 */}
      <View padding-16>
        <Text h1>SegmentedControl组件</Text>
        <Text marginB-16>分段控制组件，用于在多个选项之间切换。</Text>
        <SegmentedControl
          segments={[
            { label: "选项1" },
            { label: "选项2" },
            { label: "选项3" },
          ]}
          onChangeIndex={(index) => console.log(index)}
        />
      </View>

      {/* Stepper组件示例 */}
      <View padding-16>
        <Text h1>Stepper组件</Text>
        <Text marginB-16>步进器组件，用于增加或减少数值。</Text>
        <Stepper
          minValue={0}
          maxValue={10}
          value={5}
          onValueChange={(value) => console.log(value)}
        />
      </View>

      {/* TextField组件示例 */}
      <View padding-16>
        <Text h1>TextField组件</Text>
        <Text marginB-16>文本输入框组件，支持多种样式和验证。</Text>
        <TextField
          placeholder="输入文本"
          onChangeText={(text) => console.log(text)}
        />
      </View>

      {/* WheelPicker组件示例 */}
      <View padding-16>
        <Text h1>WheelPicker组件</Text>
        <Text marginB-16>滚轮选择器组件，用于从列表中选择一个值。</Text>
        <WheelPicker
          items={[
            { label: "选项1", value: "option1" },
            { label: "选项2", value: "option2" },
            { label: "选项3", value: "option3" },
          ]}
          onChange={(item) => console.log(item)}
        />
      </View>
      {/* Card组件示例 */}
      <View padding-16>
        <Text h1>Card组件</Text>
        <Text marginB-16>卡片组件，用于展示内容块，支持圆角、阴影等样式。</Text>
        <Card padding-16 onPress={() => console.log("卡片点击")}>
          <Text>这是一个卡片示例</Text>
          <Text marginT-8>点击卡片会有反馈效果</Text>
        </Card>
      </View>

      {/* Carousel组件示例 */}
      <View padding-16>
        <Text h1>Carousel组件</Text>
        <Text marginB-16>轮播组件，用于展示多个内容项的水平滚动视图。</Text>
        <Carousel
          containerStyle={{ height: 200 }}
          pageControlProps={{ size: 10 }}
        >
          <View
            style={{
              flex: 1,
              backgroundColor: "#e1f5fe",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Text>第一页</Text>
          </View>
          <View
            style={{
              flex: 1,
              backgroundColor: "#e8f5e9",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Text>第二页</Text>
          </View>
          <View
            style={{
              flex: 1,
              backgroundColor: "#f3e5f5",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Text>第三页</Text>
          </View>
        </Carousel>
      </View>

      {/* LoaderScreen组件示例 */}
      <View padding-16>
        <Text h1>LoaderScreen组件</Text>
        <Text marginB-16>加载屏幕组件，用于显示加载状态。</Text>
        <LoaderScreen message="加载中..." loaderColor="#2196f3" overlay />
      </View>

      {/* StackAggregator组件示例 */}
      <View padding-16>
        <Text h1>StackAggregator组件</Text>
        <Text marginB-16>堆叠聚合器组件，用于管理多个视图的堆叠显示。</Text>
        <StackAggregator
          children={[
            <Text>视图一</Text>,
            <Text>视图二</Text>,
            <Text>视图三</Text>,
          ]}
        />
      </View>

      {/* StateScreen组件示例 */}
      <View padding-16>
        <Text h1>StateScreen组件</Text>
        <Text marginB-16>
          状态屏幕组件，用于显示不同状态（如空状态、错误状态等）。
        </Text>
        <StateScreen
          title="空状态"
          subtitle="暂无数据"
          imageSource={require("@/assets/images/icon.png")}
        />
      </View>
      {/* ListItem组件示例 */}
      <View padding-16>
        <Text h1>ListItem组件</Text>
        <Text marginB-16>列表项组件，用于显示列表中的单个项目。</Text>
        <ListItem height={60} onPress={() => console.log("列表项点击")}>
          <ListItem.Part middle>
            <Text>列表项内容</Text>
          </ListItem.Part>
        </ListItem>
      </View>

      {/* Drawer组件示例 */}
      <View padding-16>
        <Text h1>Drawer组件</Text>
        <Text marginB-16>抽屉组件，可以从屏幕边缘滑出内容面板。</Text>
        <Drawer
          rightItems={[
            { text: "选项1", onPress: () => console.log("选项1") },
            { text: "选项2", onPress: () => console.log("选项2") },
            { text: "选项3", onPress: () => console.log("选项3") },
          ]}
          onDragStart={() => console.log("抽屉关闭")}
        >
          <Text>抽屉内容</Text>
        </Drawer>
      </View>

      {/* GridList组件示例 */}
      <View padding-16>
        <Text h1>GridList组件</Text>
        <Text marginB-16>网格列表组件，用于显示网格布局的数据列表。</Text>
        <GridList
          data={[{ id: 1 }, { id: 2 }, { id: 3 }]}
          renderItem={({ item }) => (
            <View
              style={{
                height: 100,
                backgroundColor: "#e1f5fe",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <Text>项目 {item.id}</Text>
            </View>
          )}
          numColumns={2}
        />
      </View>

      {/* GridListItem组件示例 */}
      <View padding-16>
        <Text h1>GridListItem组件</Text>
        <Text marginB-16>网格列表项组件，用于在GridList中显示单个项目。</Text>
        <GridListItem
          title={"Title"}
          subtitle={"Subtitle"}
          description={"Description goes here"}
          onPress={() => console.log("网格项点击")}
        ></GridListItem>
      </View>

      {/* GridView组件示例 */}
      <View padding-16>
        <Text h1>GridView组件</Text>
        <Text marginB-16>网格视图组件，用于显示网格布局的内容。</Text>
        <GridView
          items={[
            { title: "item 1", onPress: () => console.log("item 1 pressed") },
            { title: "item 2", onPress: () => console.log("item 2 pressed") },
          ]}
          numColumns={2}
          lastItemLabel={"+"}
          lastItemOverlayColor={"Colors.rgba(Colors.blue30)"}
        />
      </View>

      {/* SortableGridList组件示例 */}
      <View padding-16>
        <Text h1>SortableGridList组件</Text>
        <Text marginB-16>可排序网格列表组件，支持拖拽重新排序。</Text>
        <SortableGridList
          data={[{ id: "1" }, { id: "2" }, { id: "3" }]}
          renderItem={({ item }) => (
            <View
              style={{
                height: 100,
                backgroundColor: "#f3e5f5",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <Text>项目 {item.id}</Text>
            </View>
          )}
          numColumns={2}
          onOrderChange={() => console.log("顺序改变")}
        />
      </View>

      {/* SortableList组件示例 */}
      <View padding-16>
        <Text h1>SortableList组件</Text>
        <Text marginB-16>可排序列表组件，支持拖拽重新排序。</Text>
        <SortableList
          data={[{ id: "1" }, { id: "2" }, { id: "3" }]}
          renderItem={({ item }) => (
            <View
              style={{
                height: 60,
                backgroundColor: "#e1f5fe",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <Text>项目 {item.id}</Text>
            </View>
          )}
          onOrderChange={() => console.log("顺序改变")}
        />
      </View>

      {/* Timeline组件示例 */}
      <View padding-16>
        <Text h1>Timeline组件</Text>
        <Text marginB-16>时间轴组件，用于按时间顺序显示事件。</Text>
        <Timeline
          topLine={{
            state: Timeline.states.ERROR,
          }}
          bottomLine={{
            type: Timeline.lineTypes.DASHED,
            color: Colors.orange40,
          }}
          point={{
            type: Timeline.pointTypes.OUTLINE,
            color: Colors.orange40,
          }}
        />
      </View>

      {/* Dash组件示例 */}
      <View padding-16>
        <Text h1>Dash组件</Text>
        <Text marginB-16>虚线组件，用于创建虚线分隔线。</Text>
        <Dash vertical={false} thickness={2} length={10} gap={5} color="#999" />
      </View>

      {/* ExpandableSection组件示例 */}
      <View padding-16>
        <Text h1>ExpandableSection组件</Text>
        <Text marginB-16>可展开/折叠区域组件，用于显示可折叠内容。</Text>
        <ExpandableSection
          expanded={false}
          onPress={() => console.log("展开/折叠")}
          sectionHeader={<Text>点击展开/折叠</Text>}
        >
          <Text>这里是可折叠的内容区域</Text>
        </ExpandableSection>
      </View>

      {/* Fader组件示例 */}
      <View padding-16>
        <Text h1>Fader组件</Text>
        <Text marginB-16>渐变遮罩组件，用于创建内容渐隐效果。</Text>
        <View style={{ height: 100 }}>
          <Fader position={Fader.position.BOTTOM} size={50} visible={true} />
          <View
            style={{
              height: 200,
              backgroundColor: "#e1f5fe",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Text>内容区域</Text>
          </View>
        </View>
      </View>

      {/* Gradient组件示例 */}
      <View padding-16>
        <Text h1>Gradient组件</Text>
        <Text marginB-16>渐变背景组件，用于创建颜色渐变效果。</Text>
        <Gradient color={Colors.green30} numberOfSteps={4} />
      </View>

      {/* KeyboardRegistry组件示例 */}
      <View padding-16>
        <Text h1>KeyboardRegistry组件</Text>
        <Text marginB-16>键盘注册组件，用于管理自定义键盘。</Text>
        <Text>此组件通常用于注册自定义键盘，示例代码需要结合具体实现</Text>
      </View>

      {/* TabController组件示例 */}
      <View padding-16>
        <Text h1>TabController组件</Text>
        <Text marginB-16>选项卡控制器组件，用于管理多个选项卡视图。</Text>
        <TabController
          items={[
            { label: "选项卡一" },
            { label: "选项卡二" },
            { label: "选项卡三" },
          ]}
        >
          <TabController.TabBar />
          <TabController.TabPage index={0}>
            <View
              style={{
                height: 200,
                backgroundColor: "#e1f5fe",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <Text>选项卡一内容</Text>
            </View>
          </TabController.TabPage>
          <TabController.TabPage index={1}>
            <View
              style={{
                height: 200,
                backgroundColor: "#e8f5e9",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <Text>选项卡二内容</Text>
            </View>
          </TabController.TabPage>
          <TabController.TabPage index={2}>
            <View
              style={{
                height: 200,
                backgroundColor: "#f3e5f5",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <Text>选项卡三内容</Text>
            </View>
          </TabController.TabPage>
        </TabController>
      </View>

      {/* Wizard组件示例 */}
      <View padding-16>
        <Text h1>Wizard组件</Text>
        <Text marginB-16>向导组件，用于分步完成复杂任务。</Text>
        <Wizard
          activeIndex={0}
          onActiveIndexChanged={(index) => console.log(index)}
        >
          <Wizard.Step state={Wizard.States.ENABLED} label="第一步" />
          <Wizard.Step state={Wizard.States.DISABLED} label="第二步" />
          <Wizard.Step state={Wizard.States.DISABLED} label="第三步" />
        </Wizard>
      </View>

      {/* PageControl组件示例 */}
      <View padding-16>
        <Text h1>PageControl组件</Text>
        <Text marginB-16>页面控制组件，用于指示当前页面位置。</Text>
        <PageControl
          numOfPages={3}
          currentPage={0}
          size={10}
          onPagePress={(index) => console.log(index)}
        />
      </View>
      {/* Dialog组件示例 */}
      <View padding-16>
        <Text h1>Dialog组件</Text>
        <Text marginB-16>
          对话框组件，用于显示重要信息或需要用户确认的操作。
        </Text>
        <Button label="显示对话框" onPress={() => setDialogVisible(true)} />
        <Dialog
          visible={dialogVisible}
          onDismiss={() => setDialogVisible(false)}
          panDirection={PanningProvider.Directions.DOWN}
        >
          <Card padding-16>
            <Button label="取消" onPress={() => setDialogVisible(false)} />
            <Button label="确定" onPress={() => setDialogVisible(false)} />
          </Card>
        </Dialog>
      </View>

      {/* Modal组件示例 */}
      <View padding-16>
        <Text h1>Modal组件</Text>
        <Text marginB-16>模态框组件，用于显示全屏或部分覆盖的内容。</Text>
        <Button label="显示模态框" onPress={() => setModalVisible(true)} />
        <Modal
          visible={modalVisible}
          onDismiss={() => setModalVisible(false)}
          animationType="slide"
        >
          <View
            style={{
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
              backgroundColor: "white",
            }}
          >
            <Text>这是一个模态框示例</Text>
            <Button
              label="关闭"
              onPress={() => setModalVisible(false)}
              marginT-16
            />
          </View>
        </Modal>
      </View>

      {/* ActionSheet组件示例 */}
      <View padding-16>
        <Text h1>ActionSheet组件</Text>
        <Text marginB-16>动作面板组件，从底部滑出显示一组操作选项。</Text>
        <Button
          label="显示动作面板"
          onPress={() => setActionSheetVisible(true)}
        />
        <ActionSheet
          visible={actionSheetVisible}
          title="选择操作"
          message="请选择一个操作"
          cancelButtonIndex={2}
          destructiveButtonIndex={1}
          options={[
            { label: "分享", onPress: () => console.log("分享") },
            { label: "删除", onPress: () => console.log("删除") },
            { label: "取消", onPress: () => setActionSheetVisible(false) },
          ]}
          onDismiss={() => setActionSheetVisible(false)}
        />
      </View>

      {/* FeatureHighlight组件示例 */}
      <View padding-16>
        <Text h1>FeatureHighlight组件</Text>
        <Text marginB-16>功能高亮组件，用于引导用户关注特定功能。</Text>
        <Button
          label="显示功能高亮"
          onPress={() => setFeatureHighlightVisible(true)}
        />
        <FeatureHighlight
          visible={featureHighlightVisible}
          title="新功能"
          message="这是一个新功能，点击这里可以查看更多信息"
          // getTarget={targets[currentTarget]}
          confirmButtonProps={{
            label: "Got It",
            onPress: () => console.log("confirmed"),
          }}
          onBackgroundPress={() => console.log("background pressed")}
        />
      </View>

      {/* FloatingButton组件示例 */}
      <View padding-16>
        <Text h1>FloatingButton组件</Text>
        <Text marginB-16>浮动按钮组件，悬浮在内容上方，用于主要操作。</Text>
        <FloatingButton
          visible={true}
          button={{ label: "Approve", onPress: () => console.log("approved") }}
        />
      </View>

      {/* Hint组件示例 */}
      <View padding-16>
        <Text h1>Hint组件</Text>
        <Text marginB-16>提示组件，用于显示简短的提示信息。</Text>
        <Hint
          visible={hintVisible}
          message={"Message goes here"}
          onBackgroundPress={() => setHintVisible(false)}
        >
          <Button label="Hint组件" onPress={() => setHintVisible(true)} />
        </Hint>
      </View>

      {/* Toast组件示例 */}
      <View padding-16>
        <Text h1>Toast组件</Text>
        <Text marginB-16>轻提示组件，用于显示短暂的提示信息。</Text>
        <Button label="Toast组件" onPress={() => setToastVisible(true)} />
        <Toast
          visible={toastVisible}
          message={"Message goes here"}
          position={"top"}
          autoDismiss={2000}
          preset
          onDismiss={() => setToastVisible(false)}
        />
      </View>

      {/* Badge组件示例 */}
      <View padding-16>
        <Text h1>Badge组件</Text>
        <Text marginB-16>徽章组件，用于显示小型的数字或状态标记。</Text>
        <View style={{ flexDirection: "row", gap: 16 }}>
          <Badge label="3" />
          <Badge label="新" backgroundColor="#4caf50" />
          <Badge label="99+" size={20} />
        </View>
      </View>

      {/* ConnectionStatusBar组件示例 */}
      <View padding-16>
        <Text h1>ConnectionStatusBar组件</Text>
        <Text marginB-16>连接状态栏组件，用于显示网络连接状态。</Text>
        <ConnectionStatusBar
          label="正在连接..."
          allowDismiss
          onConnectionChange={() => console.log("连接状态改变")}
        />
      </View>

      {/* ProgressBar组件示例 */}
      <View padding-16>
        <Text h1>ProgressBar组件</Text>
        <Text marginB-16>进度条组件，用于显示任务进度。</Text>
        <View style={{ gap: 16 }}>
          <ProgressBar progress={30} progressColor={Colors.red30} />
          <ProgressBar progress={70} fullWidth />
          <ProgressBar progress={50} />
        </View>
      </View>

      {/* SkeletonView组件示例 */}
      {/* <View padding-16>
        <Text h1>SkeletonView组件</Text>
        <Text marginB-16>骨架屏组件，用于内容加载时的占位显示。</Text>
        <SkeletonView
          template={SkeletonView.templates.LIST_ITEM}
          showContent={true}
          renderContent={() => (
            <ListItem>
              <Text grey10 text60 marginL-10>
                The item
              </Text>
            </ListItem>
          )}
          times={10}
        />
      </View> */}
    </ParallaxScrollView>
  );
}
